<template>
    <transition name="slide-right">
        <div class="h-full bg-info">
            <div class="col b r-3x bg-white-only padder-md login p-b">
                <div class="padder-lg">
                    <h1 class="text-primary text-center">指管装登陆</h1>
                    <div class="p-t-sm">
                        <el-input v-model="user.loginName" placeholder="请输入账号" ref="loginName">
                            <template slot="prepend"><span class="glyphicon glyphicon-user text-xlg m-l-n-xs m-r-n-xs"></span></template>
                        </el-input>
                    </div>
                    <div class="p-t-sm">
                        <el-input type="password" v-model="user.password" placeholder="请输入密码">
                            <template slot="prepend"><span class="glyphicon glyphicon-lock text-xlg m-l-n-xs m-r-n-xs"></span></template>
                        </el-input>
                    </div>
                    <div class="p-t-sm text-danger" v-if="loginError">
                        账号和密码输入错误!
                    </div>
                    <div class="p-t-sm pull-right">
                        <router-link to='/register'>
                            <el-button class="text-dark-lt">注册</el-button>
                        </router-link>
                        <el-button type="primary" v-on:click="login()">登陆</el-button>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    name: 'login',
    data(){
        return {
            user:{
                loginName: '',
                password: ''
            },
            loginError: false
        }
    },
    methods: {
        login() {
            this.$store.dispatch('login', Object.assign({}, this.user)).then((data)=>{
                this.loginError = !data.success;
                if(data.success){
                    this.$router.push({
                        path: '/'
                    });
                }else{
                    this.$refs.loginName.focus();
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.login{
    position: absolute;
    top: 25%;
    left: 50%;
    width: 500px;
    margin-left: -250px;
    @media (max-width: 768px) {
        width: 90%;
        left: 0px;
        margin: 0 5% 0px 5%;
    }
}

.slide-right-enter-active,
.slide-right-leave-active {
  will-change: transform;
  transition: all 500ms;
}
.slide-right-enter {
  opacity: 0;
  -webkit-transform: translate(-100%, 0);
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  -webkit-transform: translate(100%, 0);
  transform: translate3d(100%, 0, 0);
}
</style>
